
<!--老师的教案-->
<template>
  <div class="plan-content pt-content-menu">
    <Row class="pageHeader">
      <div class="class-title-wrap">
        <div class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'experiment'}" @click="changeTab('experiment')">模板</div>
        </div>
        <div style="margin-left: 30px" class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'guide'}" @click="changeTab('guide')">指导书</div>
        </div>
        <div style="margin-left: 30px" class="class-title">
          <div class="class-title-all" :class="{'active':currentTabComponent == 'files'}" @click="changeTab('files')">文件管理</div>
        </div>
<!--        <div style="margin-left: 30px" class="class-title">-->
<!--          <div class="class-title-all" :class="{'active':currentTabComponent == 'video'}" @click="changeTab('video')">视频</div>-->
<!--        </div>-->
      </div>
    </Row>

<!--    具体每个table里面的内容-->
    <template>
      <component v-bind:is="currentTabComponent" class="component-page"
               v-if="currentTabComponent==='guide'"/>
      <div class="content-wrap " v-if="currentTabComponent==='experiment'">
        <div style="margin-top: 40px;">
          等待开发教案模板
        </div>
      </div>

      <div class="content-wrap " v-if="currentTabComponent==='files'">
        <div class="micro-content">
          <micro-app
              style="height: 100%"
              v-bind="fileMicro"
              destory
              @error="error"
              @datachange="handleDataChange"
          ></micro-app>
        </div>
      </div>
    </template>
  
  </div>


</template>
<script>

import experiment from "@/view/experimentalScene/designPanel/experiment.vue";
import creatExp from '@/view/experimentalScene/designPanel/creatExp'
import guide from "@/view/resourceManagement/guide.vue";
import {MICRO_URL} from "../../micro/config";
export default {
  components:{experiment,creatExp,guide},
  watch: {
    $route(to, from) {
      this.currentTabComponent = this.$route.query.page||'experiment'
    },
  },
  data () {
    return {
      isCollapsed: false,
      currentTabComponent:this.$route.query.page||'experiment',
      fileMicro: {
        url: MICRO_URL, /**子模块地址 */
        "default-page":"http://172.172.10.175/rsng-designer-source#files",
        key: "sourceChild", /**vue 标签的 key 值，用于不同子模块间的切换时，组件重新渲染 */
        name: "sourceChild", /**子模块名称，唯一 */
        data: {}, /**子模块数据 */
        baseroute: "", /**子模块数据 */
      },
    }
  },
  methods: {
    changeTab (tab) {
      this.$router.push({
        name: this.$route.name,
        query: {
          page: tab
        }
      });
    },
    error() {
      /**子模块异常 */
      this.errorMicro = true
      console.log(`${this.micro.name}-error`);
    },
    handleDataChange(event) {
      /**获取子路由传递的信息 */
      let data = event.detail.data;
      console.log('获取子路由传递的信息',data.route.name)
      if (data.route) this.$router.push({ name: data.route.name });
    },
    
  }
};
</script>
<style scoped>
.lessonPlanPageWrap{
  position: relative;
  height: 100%;
}
.pageHeader{
  position:absolute;
  padding:0px 20px 0 20px;
  z-index: 10;
  width: 400px;
  top:110px;
}
.pageHeader .title{
  float:left;
  font-size:18px;
}
.class-title-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all{
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active{
  font-weight: 700;
  color: #2d2d2d;
  font-size: 20px;
}
.component-page{
  padding-top:-20px !important;
  padding: 20px;
}
.pt-content-menu{
  background-color: var(--card-body-bgcolor);
  border-radius: 8px;
  height: 100% !important;
}

.content-wrap{
  padding:20px;
  padding-bottom: 40px;
}
.micro-content{
  /*margin-top: 40px;  */
}
.micro-content /deep/ .control {
  opacity: 0 !important;
}

</style>
